<template>
  <div class="demo">
    <div class="demo-title">自定义头部</div>
    <div class="demo-content">
      <Calendar v-model:value="value" :fullscreen="false" @panel-change="onPanelChange">
        <template #headerRender="{ value: current, type, onChange, onTypeChange }">
          <div style="padding: 10px">
            <div style="margin-bottom: 10px">Custom header</div>
            <Row type="flex" justify="space-between">
              <Col>
                <Radio.Group size="small" :value="type" @change="(e) => onTypeChange(e.target.value)">
                  <Radio.Button value="month">Month</Radio.Button>
                  <Radio.Button value="year">Year</Radio.Button>
                </Radio.Group>
              </Col>
              <Col>
                <Select
                  size="small"
                  :dropdown-match-select-width="false"
                  class="my-year-select"
                  :value="String(current.year())"
                  @change="
                    (newYear) => {
                      onChange(current.year(+newYear));
                    }
                  "
                >
                  <Select.Option
                    v-for="val in getYears(current)"
                    :key="String(val)"
                    class="year-item"
                  >
                    {{ val }}
                  </Select.Option>
                </Select>
              </Col>
              <Col>
                <Select
                  size="small"
                  :dropdown-match-select-width="false"
                  :value="String(current.month())"
                  @change="
                    (selectedMonth) => {
                      onChange(current.month(parseInt(String(selectedMonth), 10)));
                    }
                  "
                >
                  <Select.Option
                    v-for="(val, index) in getMonths(current)"
                    :key="String(index)"
                    class="month-item"
                  >
                    {{ val }}
                  </Select.Option>
                </Select>
              </Col>
            </Row>
          </div>
        </template>
      </Calendar>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import { Row, Col } from '@sscd/grid';
  import Radio from '@sscd/radio';
  import Select from '@sscd/select';
  import Calendar from '@sscd/calendar';
  const value = ref<Dayjs>();
  const onPanelChange = (_value: string | Dayjs, mode: string) => {
    console.log(value, mode);
  };
  const getMonths = (val: Dayjs) => {
    const localeData = val.localeData();
    const months = [] as any[];
    for (let i = 0; i < 12; i++) {
      months.push(localeData.monthsShort(val.month(i)));
    }
    return months;
  };
  const getYears = (val: Dayjs) => {
    const year = val.year();
    const years = [] as number[];
    for (let i = year - 10; i < year + 10; i += 1) {
      years.push(i);
    }
    return years;
  };
</script>

<style lang="less" scoped>
  .demo {
    width: 300px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
</style>
